<!--
 * @Author: 冯本桥
 * @Date: 2025-02-17 09:34:39
 * @LastEditTime: 2025-03-07 15:59:34
 * @LastEditors: 冯本桥
 * @Description:新增预约
 * @FilePath: \teach_system_fe\src\views\sellCrm\component\addSubscribe.vue
-->
<template>
  <div>
    <el-drawer
      :title="drawerText.drawerTitle"
      :visible.sync="drawer"
      :destroy-on-close="true"
      :before-close="handleCloseDrawer"
      custom-class="add-drawer"
      :wrapper-closable="false"
      size="40%"
    >
      <div style="padding: 0 20px" class="drawer-box">
        <div class="title-card">基本信息</div>
        <div class="text-message">
          <div v-for="(item, index) in textMessage" :key="index">
            {{ item.name }}:
            <span v-if="item.slot" class="text-message-item">{{
              tableSlotValue(item.option, String(fromDate[item.key]))
            }}</span>
            <span v-else class="text-message-item">{{
              fromDate[item.key] || "-"
            }}</span>
          </div>
        </div>
        <div class="title-card">{{ drawerText.cardTitle }}</div>
        <FromPage
          v-if="drawerTypes"
          ref="infoFromRef"
          :rules="rulesDate"
          :label-width="null"
          :from-config="fromConfig"
          :grid-data="gridData"
          @submitForm="drawerTypesSubmit"
        />
        <div v-else class="right-record">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in drawerText.cardData"
              :key="index"
              icon="el-icon-time"
              :timestamp="timesValue(item.actualFollowDate)"
              placement="top"
              size="large"
            >
              <el-card>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                  "
                >
                  <el-avatar
                    :size="40"
                    :src="
                      item.staffHeadImgUrl
                        ? item.staffHeadImgUrl
                        : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
                    "
                  >user
                  </el-avatar>
                  <span style="margin-left: 15px">{{ item.staffName }}</span>
                </div>
                <span class="formatted-content" v-html="item.content" />
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <div class="footer-btn">
            <el-button type="primary" @click="transfer">转为线索</el-button>
            <el-button
              class="btn-primary-box"
              @click="handOver"
            >移交</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import FromPage from '@/components/Basic/FromPage/index'
import dayjs from 'dayjs'
export default {
  components: {
    FromPage
  },
  props: {
    drawerText: {
      type: Object,
      default: () => {}
    },
    drawer: {
      type: Boolean,
      default: false
    },
    rulesDate: {
      type: Object,
      default: () => {}
    },
    fromConfig: {
      type: Array,
      default: () => []
    },
    textMessage: {
      type: Array,
      default: () => []
    },
    drawerTypes: {
      type: Boolean,
      default: true
    },
    drawerTypesSubmit: {
      type: Function,
      default: (data) => {
        console.log('leadsHistorySaveVisit', data)
      }
    },
    fromDate: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      gridData: {
        columns: 1, // 默认列数
        rows: 1, // 默认行数
        rowsWidth: '77px',
        columnsNumber: '15px',
        rowsNumber: '15px'
      }
    }
  },
  computed: {
    tableSlotValue () {
      return (key, value) => {
        if (value === null || value === 'null') {
          return '-'
        }

        return key.find((item) => item.value === value)?.label || '-'
      }
    },

    timesValue () {
      return (value) => {
        return value ? dayjs(value).format('YYYY/MM/DD') : '-'
      }
    }
  },
  created () {},
  mounted () {
    console.log('fromDate', this.drawerTypes, this.fromDate)
  },
  methods: {
    handleCloseDrawer () {
      if (this.drawerTypes) {
        this.$refs.infoFromRef.resetFields()
        this.$refs.infoFromRef.fromDate = {}
      }
      this.$emit('closePage', false)
    },

    transfer (id) {
      this.$emit('transfer', id)
    },

    handOver (id) {
      this.$emit('handOver', id)
    },

    submitForm (id) {
      this.$emit('submitForm', id)
    }
  }
}
</script>

<style scoped lang="scss">
.formatted-content {
  margin-top: 20px;
  white-space: pre-line; /* 允许换行符在文本中显示 */
  line-height: 30px;
}
.text-message {
  margin: 20px 0;
  padding: 20px 20px;
  margin-bottom: 30px;
  border: 1px solid #ebebee;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 20px);
  gap: 20px 20px;
  background-color: #fafafc;
  font-size: 17px;

  .text-message-item {
    color: #666666;
    font-size: 15px;
    margin-left: 10px;
  }
}

.title-card {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 30px;
}

.right-record {
  position: relative;

  ::v-deep .el-card {
    background-color: #f6f8fa;
    border: 1px solid #f6f8fa;
  }

  ::v-deep .is-always-shadow {
    box-shadow: none;
  }

  ::v-deep .el-timeline-item__timestamp {
    color: black;
    font-size: 15px;
  }

  .footer-btn {
    position: absolute;
    bottom: -40px;
    left: 0;
  }
}
</style>
